<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl">
<head>
	<title>Reisagenda</title>
	<link rel="stylesheet" href="template/bootstrap/bootstrap-responsive.css" type="text/css" />
	<link rel="stylesheet" href="template/bootstrap/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="template/style.css" type="text/css" />
	<script src="js/libs/jquery.js" type="text/javascript" ></script>
	<script src="js/libs/jquery-ui.js" type="text/javascript" ></script>
	<script src="js/libs/jquery.gmap-1.1.0-min.js" type="text/javascript" ></script>
	<script src="js/libs/bootstrap.js" type="text/javascript" ></script>
</head>

<body>

<div id="maincontainer">
	<div id="header">
		<a href="index.html"><img src="images/logo.png" alt="ReisAgenda" id="logo"></a>
		<div id="login">
			<p>U bent ingelogd als Iemand</p>
			<div class="panel">
				<ul>
					<li><a href="#">Mijn account</a></li>
					<li><a href="#">Mijn reis</a></li>
					<li><a href="">Nieuwe reis</a></li>
					<li><a href="index.html">Logout</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="container">
		<div class="sidecontent">
			<div class="section">
				<h2>Kalender</h2>
				<div id="datepicker"></div>
			</div>
			<div class="section">
				<h2>Kaart</h2>
				<div id="map">
					<img src="images/googlemaps.png" alt="map" onclick="window.location='kaart.html'" />
				</div>
			</div>
		</div>
		<div id="maincontent">
			<div class="section">
				<h2>Dagoverzicht</h2>
				<div id="scrollbox">
					<div id="timeline">
						<div>6:00</div>
						<div>7:00</div>
						<div>8:00</div>
						<div>9:00</div>
						<div>10:00</div>
						<div>11:00</div>
						<div>12:00</div>
						<div>13:00</div>
						<div>14:00</div>
						<div>15:00</div>
						<div>16:00</div>
						<div>17:00</div>
						<div>18:00</div>
						<div>19:00</div>
						<div>20:00</div>
						<div>21:00</div>
						<div>22:00</div>
						<div>23:00</div>
					</div>
					<div id="agenda" class="">
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
						<div class="point placeholder"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="sidecontent">
			<div class="section">
				<h2>Straal vanaf bestemming</h2>
				<!--input type="text" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]" data-items="4" data-provide="typeahead" style="margin: 0 auto;" class="span3"-->
				<div id="slider"></div>
				<div id="amount"></div>
				<h2>Activiteiten</h2>
				<div class="activiteiten" title="Sleep een item naar het dagoverzicht">
					<h3 class="klapUit">Winkels</h3>
					<div>
						<h4 class="klapUit">Kleding</h4>
						<div>
							<ul>
								<li class="item">Score</li>
								<li class="item">Zeeman</li>
								<li class="item">OPEN32</li>
							</ul>
						</div>
						<h4 class="klapUit">Warenhuis</h4>
						<div>
							<ul>
								<li class="item">V&amp;D</li>
								<li class="item">Bijenkorf</li>
							</ul>
						</div>
						<h4 class="klapUit">Schoenen</h4>
						<div>
							<ul>
								<li class="item">Schoenenreus</li>
								<li class="item">Nike</li>
								<li class="item">Adidas</li>
							</ul>
						</div>
					</div>
					<h3 class="klapUit">Horeca</h3>
					<div>
						<h4 class="klapUit">Restaurant</h4>
						<div>
							<ul>
								<li class="item">Pannekoekenhuis</li>
								<li class="item">Chinees restaurant</li>
								<li class="item">Wokpaleis</li>
							</ul>
						</div>
						<h4 class="klapUit">Cafe</h4>
						<div>
							<ul>
								<li class="item">Lokaal 99</li>
								<li class="item">Bar 41</li>
								<li class="item">Club 8</li>
							</ul>
						</div>
						<h4 class="klapUit">Discotheek</h4>
						<div>
							<ul>
								<li class="item">Manhattan</li>
								<li class="item">The Level</li>
								<li class="item">Aspen</li>
								<li class="item">Plaza</li>
							</ul>
						</div>
					</div>
					<h3 class="klapUit">Bezienswaardigheden</h3>
					<div>
						<h4 class="klapUit">Natuurpark</h4>
						<div>
							<ul>
								<li class="item">Sonsbeek</li>
								<li class="item">Landgoed bronbeek</li>
								<li class="item">Rijkerswoerdse plassen</li>
							</ul>
						</div>
						<h4 class="klapUit">Musea</h4>
						<div>
							<ul>
								<li class="item">Openluchtmuseum</li>
								<li class="item">Museum voor moderne kunst</li>
								<li class="item">Watermuseum</li>
							</ul>
						</div>
					</div>
					<h3 class="klapUit">Evenementen</h3>
					<div>
						<ul>
							<li class="item">Marco Borsato 4/4/12</li>
							<li class="item">Vitesse-NEC 12/5/12</li>
							<li class="item">Dreamfields 7/7/12</li>
						</ul>
					</div>
					<h3 class="klapUit">Amusement</h3>
					<div>
						<h4 class="klapUit">Poolen</h4>
						<div>
							<ul>
								<li class="item">House of billiards</li>
								<li class="item">Poolcentrum</li>
								<li class="item">Club 8</li>
							</ul>
						</div>
						<h4 class="klapUit">Lasergamen</h4>
						<div>
							<ul>
								<li class="item">Jules</li>
							</ul>
						</div>
						<h4 class="klapUit">Bioscoop</h4>
						<div>
							<ul>
								<li class="item">Rembrandt theater</li>
								<li class="item">Blikkenbioscoop</li>
							</ul>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div>

<script>
$(function() {
	
	$( "#datepicker" ).datepicker();
	
	$( "h3.klapUit" ).click(function(){
		$(this).toggleClass('ui-state-active');
		$(this).next().slideToggle(300);
	});
	$( "h4.klapUit" ).click(function(){
		$(this).toggleClass('ui-state-active');
		$(this).next().slideToggle(300);
	});
	$( "#login p" ).click(function(event){
		event.stopPropagation();
		//$(this).toggleClass('ui-state-active');
		$(this).next().slideToggle(300);
	});
	$( "html" ).click(function(){
		//$(this).toggleClass('ui-state-active');
		$("#login p").next().slideUp(300);
		//$("#login p").removeClass('ui-state-active');
	});
	
	//$( ".activiteiten-inner" ).accordion();
	refresh = function(){
		$('.placeholder').droppable({
			accept: '.item',
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				var div = $('<div></div>').addClass('resizer').text( ui.draggable.text() ).appendTo(this);
				$('<span class="del">x</span>').click(function(){
					$(this.parentNode).resizable('destroy');
					$(this.parentNode.parentNode).text('').removeClass('activity').addClass('placeholder');
					refresh();
				}).appendTo( div );
				$( this ).removeClass('ui-droppable placeholder').addClass('activity');
				$( div ).resizable({
					maxHeight: 400,
					minHeight: 40,
					grid: 40,
					handles: 's'
				});
				$(this).droppable("destroy");
			}
		});
		$('#agenda').sortable({
			items: '.point',
			cancel: '.placeholder',
			start: function(){
				$( '.resizer' ).resizable('destroy');
			},
			stop: function(){
				$( '.resizer' ).resizable({
					maxHeight: 400,
					minHeight: 40,
					grid: 40,
					handles: 's'
				});
			}
		});
		$( ".item" ).draggable({
			helper: 'clone',
			cursor: 'move',
			containment: '#maincontainer',
			revert: 'invalid'
			/*collision: function(event, ui){
				alert('lol');
			}*/
		});
		/*$("#agenda" ).bind( 
			"collision",
			function(event,ui) { alert('w');
			  // $(this) is the draggable
			  // event is one of the below types, see them for details and event.* contents
			  // ui is the same as in "drag" et al
			}
		  );*/
	}
	$( "#slider" ).slider({
		range: "min",
		value: 37,
		min: 1,
		max: 200,
		slide: function( event, ui ) {
			$( "#amount" ).text( "" + ui.value +" km");
		}
	});
	$( "#amount" ).text( $( "#slider" ).slider( "value" ) + " km" );
	
	refresh();
	$( ".item" ).disableSelection();
	$( "#agenda" ).disableSelection();
	$( "#login" ).disableSelection();
});
</script>

</body>

</html>